<template>
    <div>
        <SchoolHeader :menuItemsData="menuItems" />
        <Carousel />
        <!-- <Features /> -->
        <RsBlog />
        <FeaturedCourses />
        <About />
        <Gallery />
        <Footer />
        <div class="side_bar">
            <div class="side_bar_content activeshow">
                <div class="side_bar_opt">
                    <div class="side_bar_menu">
                        <div class="side_bar_menu_item chatContent" >
                            <a  target="_self"
                                class="menu_item_main">
                                <div class="menu_item_icon chat"></div>
                                <div class="menu_item_desc">学校公众号</div>
                            </a>
                            <div class="menu_contenta">
                                <div class="menu_content_recommend_qrcode"><img alt=""
                                    class="menu_content_recommend_qrcode_img" src="@/assets/images/code.jpg"></div>
                            </div>
                          
                        </div>
                        <div class="side_bar_menu_item callContent"><a  target="_self"
                                class="menu_item_main">
                                <div class="menu_item_icon call"></div>
                                <div class="menu_item_desc">招生电话</div>
                            </a>
                            <ul class="menu_content" >
                                <li>
                                    <a href="tel:4000-180-300" target="_blank" class="menu_content_item_main">
                                        <div class="menu_content_item_icon"><i class="icon_call"></i></div>
                                        <div class="menu_content_item_desc">
                                            <h4>招生电话</h4>
                                            <p>18907335032 朱老师</p>
                                            <p>13973301150 邓老师</p>
                                        </div>
                                    </a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="side-bar-sidebox side-bar-sidebox-animation" style="">
                    <img src="@/assets/images/sidebg_new.4917245.png" class="side_bar_sidebg">
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import SchoolHeader from '@/components/SchoolHeaderCopy.vue';
import Carousel from '@/components/Carousel.vue';
import RsBlog from './viewComponents/RsBlog.vue';
import FeaturedCourses from './viewComponents/FeaturedCourses.vue';
import About from './viewComponents/About.vue';
import Footer from './viewComponents/Footer.vue';
import Gallery from './viewComponents/Gallery.vue';
import { ref, onMounted } from 'vue';
import { useMenuStore } from '@/stores/menuStore';
const menuStore = useMenuStore();
const menuItems = menuStore.menuItems;

</script>
<style lang="scss" scoped>
.side_bar {
    width: 130px;
    height: 552px;
    box-sizing: border-box;
    position: fixed;
    top: 25%;
    right: 5px;
    z-index: 101;
    overflow: visible;
    transition: all .3s;
    transition-delay: .3s
}

.side_bar .side_bar_content {
    display: none;
    width: 100%;
    height: 100%;
    position: relative
}

.side_bar .side_bar_content.activeshow {
    display: block
}

.side_bar .side_bar_content .side_bar_opt {
    position: absolute;
    top: 18%;
    right: 14%;
    z-index: 5
}

.side_bar .side_bar_content .side_bar_opt .side_bar_chat {
    display: none;
    box-shadow: 0 2px 10px 0 rgba(115, 124, 139, .25);
    background-color: #fff;
    transition: all .3s ease-out;
    border-radius: 8px;
    position: absolute;
    left: -535px;
    top: 10px
}

.side_bar .side_bar_content .side_bar_opt .side_bar_chat .side_bar_chat_toggle {
    padding: 6px 10px;
    text-align: center
}

.side_bar .side_bar_content .side_bar_opt .side_bar_chat .side_bar_chat_toggle .side_qrcode_img {
    display: block;
    width: 150px;
    height: 150px;
    background-image: url('@/assets/images/code.jpg');
    background-size: 150px 150px
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_item_main .menu_item_icon.chat {
    background: url('@/assets/images/side_icon_one.d462552.png') no-repeat;
    background-size: 100% 100%
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_item_main .menu_item_icon.call {
    background: url(@/assets/images/side_icon_two.1f0f676.png) no-repeat;
    background-size: 100% 100%
}

.side_bar .side_bar_content .side_bar_opt .side_bar_chat .side_bar_chat_toggle p {
    font-size: 12px
}

.side_bar .side_bar_content .side_bar_opt .side_bar_chat.active {
    display: block
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item {
    position: relative
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_item_main {
    margin-top: 10px;
    border-radius: 6px;
    background-color: #fff;
    text-align: center;
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_item_main .menu_item_icon {
    display: inline-block;
    width: 34px;
    height: 28px;
    background-color: transparent;
    margin: 0 auto
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_item_main .menu_item_desc {
    font-size: 12px;
    color: #333;
    text-align: center
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_item_main:hover .menu_item_desc {
    cursor: pointer;
    color: #4285f4
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_content {
    width: 330px;
    padding: 15px;
    position: absolute;
    top: 0;
    right: 135%;
    border-radius: 8px;
    box-shadow: 0 4px 16px 0 rgba(115, 124, 139, .15);
    background: #fff;
    transition: all .3s
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_content li {
    width: 100%;
    margin-bottom: 15px;
    border-radius: 8px
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_content li .menu_content_item_main {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid #f4f7fb;
    overflow: hidden;
    border-radius: 8px;
    display: flex;
    align-items: center
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_content li .menu_content_item_main .menu_content_item_icon {
    width: 72px;
    padding: 15px 0;
    border-radius: 6px 0 0 6px;
    background: #f4f7fb;
    text-align: center
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_content li .menu_content_item_main .menu_content_item_icon i {
    display: inline-block;
    width: 30px;
    height: 30px
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_content li .menu_content_item_main .menu_content_item_icon i.icon_chat_weixin {
    width: 32px;
    height: 32px;
    background: url() no-repeat;
    background-size: 100% 100%
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_content li .menu_content_item_main .menu_content_item_icon i.icon_chat_service {
    width: 30px;
    height: 26px;
    background: url() no-repeat;
    background-size: 100% 100%
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_content li .menu_content_item_main .menu_content_item_icon i.icon_call {
    background: url('@/assets/images/telephone.0b9702c.png') no-repeat;
    background-size: 100% 100%
}


.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_content li .menu_content_item_main .menu_content_item_desc {
    margin-left: 15px
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_content li .menu_content_item_main .menu_content_item_desc h4 {
    font-size: 16px;
    color: #20242b;
    margin-bottom: 5px
}
p{
    margin: 0;
}
.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_content li .menu_content_item_main .menu_content_item_desc p {
    font-size: 14px;
    color: #737c8b
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_content li .menu_content_item_main:hover .menu_content_item_desc h4 {
    cursor: pointer;
    color: #4285f4
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_content li:last-child {
    margin-bottom: 0
}


.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_content_recommend_qrcode {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    position: absolute;
    top: -135%;
    right: 135%;
    border-radius: 8px;
    box-shadow: 0 4px 16px 0 rgba(115, 124, 139, .15);
    transition: all .3s
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item .menu_content_recommend_qrcode .menu_content_recommend_qrcode_img {
    width: 160px;
    height: 160px
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.marketContent .menu_content {
    width: 350px;
    top: auto;
    bottom: -10px
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.marketContent .menu_content:hover {
    cursor: pointer
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.marketContent .menu_content:hover .menu_content_item_desc p {
    color: #4285f4
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.marketContent .menu_content:before {
    content: "";
    top: 60px
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.demoContent .menu_content {
    top: -235%
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.demoContent .menu_content li {
    position: relative;
    border: 1px solid #f4f7fb
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.demoContent .menu_content li a {
    height: 80px;
    background-color: transparent;
    background-color: initial
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.demoContent .menu_content li a .menu_content_item_desc h4 {
    font-size: 16px;
    color: #20242b;
    font-weight: 500
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.demoContent .menu_content li a .menu_content_item_desc h4 span {
    font-size: 12px;
    color: #333
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.demoContent .menu_content li a .menu_content_item_desc p {
    font-size: 12.8px;
    color: #4285f4;
    font-weight: 500
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.demoContent .menu_content li a .menu_content_item_desc p i {
    position: relative
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.demoContent .menu_content li a .menu_content_item_desc p i:before {
    content: "";
    height: 10px;
    width: 10px;
    position: absolute;
    top: 5px;
    left: 14px;
    background-image: url();
    background-size: 10px;
    border: 0;
    transform: inherit
}



.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.demoContent .menu_content li:hover {
    cursor: pointer;
    background-image: linear-gradient(90deg, #3479ed 20%, #7cb9ff)
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.demoContent .menu_content li:hover a .menu_content_item_desc h4,
.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.demoContent .menu_content li:hover a .menu_content_item_desc h4 span,
.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.demoContent .menu_content li:hover a .menu_content_item_desc p {
    color: #fff
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.demoContent .menu_content li:hover a .menu_content_item_desc p i {
    -webkit-animation: arrMove 1s infinite;
    animation: arrMove 1s infinite
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.demoContent .menu_content li:hover a .menu_content_item_desc p i:before {
    content: "";
    background-image: url();
    background-size: 10px
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.demoContent .menu_content li:hover:nth-child(2) {
    background-image: linear-gradient(90deg, #5d4de5 20%, #96a3ff)
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.demoContent .menu_content li:hover:nth-child(3) {
    background-image: linear-gradient(90deg, #0abdd6 20%, #a5fbdc)
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.demoContent .menu_content li:hover:nth-child(4) {
    background-image: linear-gradient(90deg, #f3833e 20%, #f9d697)
}

.side_bar .side_bar_content .side_bar_opt .side_bar_menu .side_bar_menu_item.demoContent .menu_content:before {
    content: "";
    top: 200px
}

.side_bar .side_bar_content .side-bar-scroll {
    display: none;
    position: absolute;
    bottom: 40px;
    right: 25%
}



.side_bar .side_bar_content .side-bar-scroll.active {
    display: block
}

.side_bar .side_bar_content .side-bar-scroll:hover {
    cursor: pointer
}

.side_bar .side_bar_content .side-bar-sidebox {
    position: absolute;
    z-index: 1;
    transform: scaleY(.8);
    top: -8.5%;
    right: -5%
}

.side_bar .side_bar_content .side-bar-sidebox .side_bar_sidebg {
    width: 136px;
    height: 380px
}
.chatContent .menu_contenta {
    display: none;
}
.chatContent:hover .menu_contenta {
    display: block;
}
.callContent .menu_content {
    display: none;
}
.callContent:hover .menu_content {
    display: block;
}
</style>